vue
复制代码
	<template>  

	  <div class="login-container">  

	    <h2>登录</h2>  

	    <form @submit.prevent="handleSubmit">  

	      <div class="form-group">  

	        <label for="username">用户名:</label>  

	        <input type="text" id="username" v-model="form.username" required>  

	      </div>  

	      <div class="form-group">  

	        <label for="password">密码:</label>  

	        <input type="password" id="password" v-model="form.password" required>  

	      </div>  

	      <button type="submit" :disabled="!isFormValid">登录</button>  

	    </form>  

	    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>  

	  </div>  

	</template>  

	  

	<script>  

	export default {  

	  data() {  

	    return {  

	      form: {  

	        username: '',  

	        password: '',  

	      },  

	      errorMessage: '',  

	    };  

	  },  

	  computed: {  

	    isFormValid() {  

	      return this.form.username.trim() !== '' && this.form.password.trim() !== '';  

	    },  

	  },  

	  methods: {  

	    handleSubmit() {  

	      // 在这里添加你的登录逻辑  

	      // 例如，使用 axios 发送 POST 请求到后端 API  

	  

	      // 假设用户名或密码不正确，我们设置一个错误消息  

	      this.errorMessage = '用户名或密码不正确';  

	  

	      // 如果登录成功，你可以清除错误消息并跳转到其他页面  

	      // this.errorMessage = '';  

	      // this.$router.push('/dashboard');  

	    },  

	  },  

	};  

	</script>  

	  

	<style scoped>  

	.login-container {  

	  display: flex;  

	  flex-direction: column;  

	  align-items: center;  

	  justify-content: center;  

	  height: 100vh;  

	  padding: 20px;  

	  box-sizing: border-box;  

	}  

	  

	.form-group {  

	  margin-bottom: 10px;  

	}  

	  

	.error-message {  

	  color: red;  

	  margin-top: 10px;  

	}  

	</style>